<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>动物迁徙可视化大屏</title>
  <!-- 引入 ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <!-- 引入 Leaflet -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body {
      margin: 0;
      background-color: #1e1e2f;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #fff;
    }
    .dashboard {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      background-color: #2c2c3e;
      font-size: 24px;
      font-weight: bold;
      height: 60px;
    }
    .stats {
      display: flex;
      justify-content: space-around;
      background-color: #2c2c3e;
      padding: 10px 0;
    }
    .stat {
      text-align: center;
    }
    .stat .number {
      font-size: 20px;
      font-weight: bold;
      margin-top: 5px;
    }
    .main {
      flex: 1;
      display: flex;
      justify-content: space-between; /* 保证图表和地图平分区域 */
      padding: 20px;
    }
    #map {
      width: 65%; /* 地图占65% */
      height: 100%;
    }
    #charts {
      display: flex;
      flex-direction: column;
      width: 30%; /* 图表占30% */
      justify-content: space-between; /* 图表上下分布 */
    }
    .chart {
      flex: 1;
      padding: 10px;
      margin-bottom: 10px; /* Add some space between charts */
      background-color: #333;
      border-radius: 8px;
    }
    .popup-content {
      width: 350px;
      height: 300px;
      display: flex;
      flex-direction: column;
    }
    .header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    .header h3 {
      margin-right: 10px;
    }
    .chart-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
    }
    .leaflet-popup-content-wrapper {
      width: 400px !important;
      max-width: none !important;
      max-height: none !important;
      overflow: visible !important;
    }
    .leaflet-popup-content {
      width: 400px;
      max-width: none !important;
      max-height: none !important;
      overflow: visible !important;
    }
    .stat .number {
      font-size: 22px;
      font-weight: bold;
      margin-top: 8px;
      color: #ffffff;
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    /* 主内容区微调 */
    .main {
      display: flex;
      height: calc(100vh - 180px); /* 调整高度以适应统计栏的纵向排列 */
    }
  </style>
</head>
<body>
  <div class="dashboard">
    <div class="header">动物迁徙可视化大屏</div>
    <div class="main">
      <div id="charts">
        <div class="chart" id="chart1"></div>
        <div class="chart" id="chart2"></div>
      </div>
      <div id="map"></div>
    </div>
    <div class="stats">
      <div class="stat">
        <div>物种轨迹数量</div>
        <div class="number" id="speciesCount">0</div>
      </div>
      <div class="stat">
        <div>气象因子数据数量</div>
        <div class="number" id="weatherFactors">0</div>
      </div>
      <div class="stat">
        <div>覆盖时间</div>
        <div class="number" id="coverageTime">0年</div>
      </div>
      <div class="stat">
        <div>当前在线用户</div>
        <div class="number" id="onlineUsers">0</div>
      </div>
      <div class="stat">
        <div>专家用户数量</div>
        <div class="number" id="expertUsers">0</div>
      </div>
      <div class="stat">
        <div>专家上传点位数量</div>
        <div class="number" id="expertPoints">0</div>
      </div>
      <div class="stat">
        <div>论文数量</div>
        <div class="number" id="paperCount">0</div>
      </div>
      <div class="stat">
        <div>评论总数</div>
        <div class="number" id="commentCount">0</div>
      </div>
    </div>
  </div>

  <script src="./js/vs.js"></script>
</body>
</html>
